import QtQuick 2.0
import Sailfish.Silica 1.0
import "../config"

Rectangle{
    id:root
    property string title: ""
    property string value: ""
    property int padding: 20
    property MouseArea clickMouse: null

    height: centerContainer.height+2*padding
    width: parent.width
    x:(parent.width - width) /2
    y:(parent.height - height)/2
    radius: 20
    color: AppColor.themeMode.transparent

    Rectangle {
        id: centerContainer
        height: row.implicitHeight
        width: parent.width - 2*padding
        x: (parent.width-width)/2
        y: (parent.height-height)/2
        color: AppColor.themeMode.primaryComponentColor
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter

        Row {
            id:row
            width: parent.width
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            Label {
                id: titleLabel
                text: title
                padding: itemSpa
                font.pixelSize: Theme.fontSizeMedium
                wrapMode: Text.Wrap
                color: AppColor.themeMode.primaryColor
            }

            Label {
                id: valueLabel
                width: parent.width-titleLabel.width
                text: value
                padding: itemSpa
                font.pixelSize: Theme.fontSizeSmall
                horizontalAlignment: Text.AlignRight
                color: AppColor.themeMode.secondaryColor
            }
        }

    }

}
